<style>
    #box{width: 100%;height: 100%;word-wrap:inherit;background: #999999}
    .one{width: 100px;height: 100px;display: inline-block;float: left;display: none;margin: 10px;}
    .one img{width: 100px;height: 85px;cursor: pointer;}
    .one span{display: block;height: 10px;font-size: 14px;word-break: break-word;text-align: center;}
    #pic{display: none;width: 100%;height: 100%;background: #aaa;z-index: 2;position: absolute;left: 0px;top: 0px;}
    #pic img{height: 100%;width: auto;}
    #pic i{    width: 33px;
    border: #000 solid 1px;
    position: absolute;
    margin: 10px;
    font-size: 33px;
    text-align: center;
    right: 0px;
    font-style: inherit;
    opacity: 0.7;
    cursor: pointer;
    border-radius: 4px;
    top: 0px;
    }
</style>
<div id="box">
    <div class="one">
            <img src="" />
            <span>123</span>
    </div>
</div>
<div id="pic" onclick="style.display='none'"><img onclick="event.stopPropagation()"/><i>X</i></div>
<script>
    function maxpic(){
        var box=document.getElementById('pic')
        box.children[0].src=this.children[0].src
        box.style.display='block';
    }
    var box=document.getElementById('box')
    var demo=document.getElementsByClassName('one')[0]
    var pics=window.localStorage.getItem('pics')
    pics=JSON.parse(pics)
    pics.forEach(function(p){
        var one=demo.cloneNode()
        one.innerHTML=demo.innerHTML
        one.style.display='block';
        one.onclick=maxpic
        one.children[0].src="file://"+p.file
        one.children[1].innerText=p.file.replace(/.+\W(\w+\.\w+)/,'$1')
        box.append(one)
    })
</script>